{% extends 'base.html' %}

{% block title %}仪表盘 - EasyTesting{% endblock %}

{% block header %}仪表盘{% endblock %}

{% block content %}
    <div class="row">
        <div class="col-md-3 mb-4">
            <div class="card h-100">
                <div class="card-body stat-card primary">
                    <div class="stat-title">项目</div>
                    <div class="stat-value">{{ projects_count }}</div>
                    <a href="{% url 'project_list' %}" class="btn btn-sm btn-light stat-link">全部</a>
                </div>
            </div>
        </div>
        <div class="col-md-3 mb-4">
            <div class="card h-100">
                <div class="card-body stat-card success">
                    <div class="stat-title">测试用例</div>
                    <div class="stat-value">{{ test_cases_count }}</div>
                    <a href="{% url 'test_case_list' %}" class="btn btn-sm btn-light stat-link">全部</a>
                </div>
            </div>
        </div>
        <div class="col-md-3 mb-4">
            <div class="card h-100">
                <div class="card-body stat-card info">
                    <div class="stat-title">测试套件</div>
                    <div class="stat-value">{{ test_suites_count }}</div>
                    <a href="{% url 'test_suite_list' %}" class="btn btn-sm btn-light stat-link">全部</a>
                </div>
            </div>
        </div>
        <div class="col-md-3 mb-4">
            <div class="card h-100">
                <div class="card-body stat-card warning">
                    <div class="stat-title">测试运行</div>
                    <div class="stat-value">{{ test_runs_count }}</div>
                    <a href="{% url 'test_run_list' %}" class="btn btn-sm btn-light stat-link">全部</a>
                </div>
            </div>
        </div>
        <div class="col-md-3 mb-4">
            <div class="card h-100">
                <div class="card-body stat-card warning">
                    <div class="stat-title">测试报告</div>
                    <div class="stat-value">{{ report_count }}</div>
                    <a href="{% url 'test_report_list' %}" class="btn btn-sm btn-light stat-link">全部</a>
                </div>
            </div>
        </div>
    </div>

    <!-- 折线图区域 -->
    <div class="row">
        <div class="col-md-12 mb-4">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <span>增长趋势</span>
                    <div class="d-flex gap-2">
                        <div class="btn-group" role="group">
                            <button type="button" class="btn btn-sm btn-outline-secondary active" data-period="week">
                                周
                            </button>
                            <button type="button" class="btn btn-sm btn-outline-secondary" data-period="month">月
                            </button>
                            <button type="button" class="btn btn-sm btn-outline-secondary" data-period="year">年
                            </button>
                        </div>
                        <button id="exportTrendsChart" class="btn btn-sm btn-outline-primary">
                            <i class="bi bi-download me-1"></i> 导出图片
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <canvas id="growthTrendsChart" height="100"></canvas>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-8 mb-4">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <span>最近测试运行</span>
                    <a href="{% url 'test_run_list' %}" class="btn btn-sm btn-outline-primary">
                        <i class="bi bi-list-ul me-1"></i> 查看全部
                    </a>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                            <tr>
                                <th>名称</th>
                                <th>项目</th>
                                <th>环境</th>
                                <th>状态</th>
                                <th>创建时间</th>
                                <th>动作</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for test_run in recent_test_runs %}
                                <tr>
                                    <td>{{ test_run.name }}</td>
                                    <td>{{ test_run.project.name }}</td>
                                    <td>{{ test_run.environment.name }}</td>
                                    <td>
                                        {% if test_run.status == 'completed' %}
                                            <span class="badge bg-success">Completed</span>
                                        {% elif test_run.status == 'failed' %}
                                            <span class="badge bg-danger">Failed</span>
                                        {% elif test_run.status == 'running' %}
                                            <span class="badge bg-primary">Running</span>
                                        {% else %}
                                            <span class="badge bg-secondary">Pending</span>
                                        {% endif %}
                                    </td>
                                    <td>{{ test_run.created_at|date:"Y-m-d H:i" }}</td>
                                    <td>
                                        <a href="{% url 'test_run_detail' pk=test_run.pk %}"
                                           class="btn btn-sm btn-outline-primary">
                                            <i class="bi bi-eye"></i>
                                        </a>
                                    </td>
                                </tr>
                            {% empty %}
                                <tr>
                                    <td colspan="6" class="text-center py-4">
                                        <div class="text-muted">
                                            <i class="bi bi-info-circle me-2"></i> 暂无测试运行
                                        </div>
                                        <a href="{% url 'test_case_list' %}" class="btn btn-sm btn-primary mt-2">
                                            运行
                                        </a>
                                    </td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% if recent_test_runs.has_other_pages %}
                        <div class="d-flex justify-content-center mt-3">
                            <nav aria-label="Page navigation">
                                <ul class="pagination">
                                    {% if recent_test_runs.has_previous %}
                                        <li class="page-item">
                                            <a class="page-link" href="?page=1" aria-label="First">
                                                <span aria-hidden="true">&laquo;&laquo;</span>
                                            </a>
                                        </li>
                                        <li class="page-item">
                                            <a class="page-link"
                                               href="?page={{ recent_test_runs.previous_page_number }}"
                                               aria-label="Previous">
                                                <span aria-hidden="true">&laquo;</span>
                                            </a>
                                        </li>
                                    {% else %}
                                        <li class="page-item disabled">
                                            <a class="page-link" href="#" aria-label="First">
                                                <span aria-hidden="true">&laquo;&laquo;</span>
                                            </a>
                                        </li>
                                        <li class="page-item disabled">
                                            <a class="page-link" href="#" aria-label="Previous">
                                                <span aria-hidden="true">&laquo;</span>
                                            </a>
                                        </li>
                                    {% endif %}

                                    {% for i in recent_test_runs.paginator.page_range %}
                                        {% if recent_test_runs.number == i %}
                                            <li class="page-item active"><a class="page-link" href="#">{{ i }}</a></li>
                                        {% elif i > recent_test_runs.number|add:'-3' and i < recent_test_runs.number|add:'3' %}
                                            <li class="page-item"><a class="page-link" href="?page={{ i }}">{{ i }}</a>
                                            </li>
                                        {% endif %}
                                    {% endfor %}

                                    {% if recent_test_runs.has_next %}
                                        <li class="page-item">
                                            <a class="page-link" href="?page={{ recent_test_runs.next_page_number }}"
                                               aria-label="Next">
                                                <span aria-hidden="true">&raquo;</span>
                                            </a>
                                        </li>
                                        <li class="page-item">
                                            <a class="page-link" href="?page={{ recent_test_runs.paginator.num_pages }}"
                                               aria-label="Last">
                                                <span aria-hidden="true">&raquo;&raquo;</span>
                                            </a>
                                        </li>
                                    {% else %}
                                        <li class="page-item disabled">
                                            <a class="page-link" href="#" aria-label="Next">
                                                <span aria-hidden="true">&raquo;</span>
                                            </a>
                                        </li>
                                        <li class="page-item disabled">
                                            <a class="page-link" href="#" aria-label="Last">
                                                <span aria-hidden="true">&raquo;&raquo;</span>
                                            </a>
                                        </li>
                                    {% endif %}
                                </ul>
                            </nav>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <div class="col-md-4 mb-4">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <span>活动时间线</span>
                    <button class="btn btn-sm btn-outline-secondary" id="refreshTimeline">
                        <i class="bi bi-arrow-clockwise"></i>
                    </button>
                </div>
                <div class="card-body p-0">
                    <ul class="list-group list-group-flush timeline">
                        {% for activity in recent_activities|slice:":5" %}
                            <li class="list-group-item">
                                <div class="d-flex">
                                    <div class="timeline-icon
                                    {% if 'completed' in activity.description %}bg-success
                                    {% elif 'pending' in activity.description %}bg-primary
                                    {% elif 'failed' in activity.description %}bg-danger
                                    {% elif 'running' in activity.description %}bg-warning
                                    {% else %}bg-info{% endif %}">
                                        <i class="bi
                                        {% if 'completed' in activity.description %}bi-check-lg
                                        {% elif 'pending' in activity.description %}bi-arrow-repeat
                                        {% elif 'failed' in activity.description %}bi-exclamation-diamond
                                        {% elif 'running' in activity.description %}bi-arrow-clockwise
                                        {% else %}bi-activity{% endif %}"></i>
                                    </div>
                                    <div class="ms-3">
                                        <div class="fw-bold">{{ activity.action }}</div>
                                        <div class="text-muted small">{{ activity.timestamp|date:"Y-m-d H:i" }}</div>
                                        <div>{{ activity.description }}</div>
                                    </div>
                                </div>
                            </li>
                        {% empty %}
                            <li class="list-group-item text-center py-4">
                                <div class="text-muted">
                                    <i class="bi bi-info-circle me-2"></i> 最近没有活动
                                </div>
                            </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>

            <!-- 添加快速操作卡片 -->
            <div class="card mt-4">
                <div class="card-header">
                    <span>快捷操作</span>
                </div>
                <div class="card-body p-0">
                    <div class="list-group list-group-flush">
                        <a href="{% url 'project_create' %}"
                           class="list-group-item list-group-item-action d-flex align-items-center">
                            <i class="bi bi-folder-plus text-primary me-3 fs-5"></i>
                            <div>
                                <div class="fw-medium">创建项目</div>
                                <div class="text-muted small">添加一个新的项目</div>
                            </div>
                        </a>
                        <a href="{% url 'test_case_create' %}"
                           class="list-group-item list-group-item-action d-flex align-items-center">
                            <i class="bi bi-file-earmark-plus text-success me-3 fs-5"></i>
                            <div>
                                <div class="fw-medium">创建用例</div>
                                <div class="text-muted small">新增一个测试用例</div>
                            </div>
                        </a>
                        <a href="{% url 'test_suite_create' %}"
                           class="list-group-item list-group-item-action d-flex align-items-center">
                            <i class="bi bi-collection-play text-info me-3 fs-5"></i>
                            <div>
                                <div class="fw-medium">创建测试套件</div>
                                <div class="text-muted small">组织测试套件</div>
                            </div>
                        </a>
                        <a href="{% url 'environment_create' %}"
                           class="list-group-item list-group-item-action d-flex align-items-center">
                            <i class="bi bi-gear text-warning me-3 fs-5"></i>
                            <div>
                                <div class="fw-medium">新增配置环境</div>
                                <div class="text-muted small">配置环境信息</div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block extra_js %}
    <script>
    document.addEventListener('DOMContentLoaded', function () {
        // 从 Django 模板变量获取真实数据
        const realData = {
            week: {{ daily_data_json|safe }},
            month: {{ monthly_data_json|safe }},
            year: {{ yearly_data_json|safe }}
        };

        // 图表配置
        const growthChartConfig = {
            type: 'line',
            data: {
                labels: realData.week.labels,
                datasets: [
                    {
                        label: '项目',
                        data: realData.week.datasets.projects,
                        borderColor: 'rgba(75, 192, 192, 1)',
                        backgroundColor: 'rgba(75, 192, 192, 0.2)',
                        tension: 0.4,
                        fill: true
                    },
                    {
                        label: '测试用例',
                        data: realData.week.datasets.test_cases,
                        borderColor: 'rgba(54, 162, 235, 1)',
                        backgroundColor: 'rgba(54, 162, 235, 0.2)',
                        tension: 0.4,
                        fill: true
                    },
                    {
                        label: '测试套件',
                        data: realData.week.datasets.test_suites,
                        borderColor: 'rgba(255, 159, 64, 1)',
                        backgroundColor: 'rgba(255, 159, 64, 0.2)',
                        tension: 0.4,
                        fill: true
                    },
                    {
                        label: '测试运行',
                        data: realData.week.datasets.test_runs,
                        borderColor: 'rgba(153, 102, 255, 1)',
                        backgroundColor: 'rgba(153, 102, 255, 0.2)',
                        tension: 0.4,
                        fill: true
                    },
                    {
                        label: '测试报告',
                        data: realData.week.datasets.test_reports,
                        borderColor: 'rgba(255, 99, 132, 1)',
                        backgroundColor: 'rgba(255, 99, 132, 0.2)',
                        tension: 0.4,
                        fill: true
                    }
                ]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'top'
                    },
                    title: {
                        display: true,
                        text: '测试平台增长趋势'
                    }
                },
                interaction: {
                    mode: 'index',
                    intersect: false
                },
                scales: {
                    x: {
                        display: true,
                        title: {
                            display: true,
                            text: '时间'
                        }
                    },
                    y: {
                        display: true,
                        title: {
                            display: true,
                            text: '数量'
                        },
                        beginAtZero: true
                    }
                }
            }
        };

        const growthTrendsChart = new Chart(
            document.getElementById('growthTrendsChart'),
            growthChartConfig
        );

        // 切换时间段
        document.querySelectorAll('[data-period]').forEach(button => {
            button.addEventListener('click', function () {
                document.querySelectorAll('[data-period]').forEach(btn => btn.classList.remove('active'));
                this.classList.add('active');

                const period = this.getAttribute('data-period');
                const periodData = realData[period];

                growthTrendsChart.data.labels = periodData.labels;
                growthTrendsChart.data.datasets[0].data = periodData.datasets.projects;
                growthTrendsChart.data.datasets[1].data = periodData.datasets.test_cases;
                growthTrendsChart.data.datasets[2].data = periodData.datasets.test_suites;
                growthTrendsChart.data.datasets[3].data = periodData.datasets.test_runs;
                growthTrendsChart.data.datasets[4].data = periodData.datasets.test_reports;

                growthTrendsChart.update();
            });
        });

        // 导出图表
        document.getElementById('exportTrendsChart').addEventListener('click', function() {
            const link = document.createElement('a');
            link.download = 'growth-trends-chart.png';
            link.href = growthTrendsChart.toBase64Image();
            link.click();
        });

        // 刷新按钮
        document.getElementById('refreshTimeline').addEventListener('click', function() {
            this.classList.add('spin');
            setTimeout(() => this.classList.remove('spin'), 1000);
        });
    });
    </script>


    <style>
        .timeline .timeline-icon {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
        }

        .timeline .list-group-item {
            border-left: none;
            border-right: none;
        }

        .timeline .list-group-item:first-child {
            border-top: none;
        }

        .spin {
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }

        .btn-group .btn.active {
            background-color: #6c757d;
            color: white;
        }
    </style>
{% endblock %}
